<!DOCTYPE html>
<html lang="en">
<%
layout("/common/_body.html",{title:'无人机面积测量'}){
%>

<body>
<!-- 页面头部 -->
<!-- 中间区域 -->
<div class="main">
    <div class="gis_wrap">
        <div class="calculate_head clearfix">
            <div class="cal_section">无人机编号：${area.no!}</div>
            <div class="cal_section">计算时间:${area.createDate!}</div>
            <div class="cal_section">测试面积:${area.result!}m</div>
        </div>
        <div class="map_rt" id="container"></div>
        <div class="coord_box">
            <h3>坐标信息</h3>
            <ul class="coord_ul clearfix">
                <%
                if(list!=null){
                for(var l in list){
                %>
                <li><span class="num">1</span><span class="dot">${l.lat!}, ${l.lnt!}</span></li>
                <%
                }
                }

                %>
            </ul>
        </div>
    </div>

</div>


<%}%>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=e6d534ef55be8b40a221149c3b21d54a&plugin=Map3D"></script>
<script language="javascript">

    //坐标信息列表
    var lineArr = [
        <%
    if(list!=null){
        for(var l in list){
        %>
            [${l.lat!},${l.lnt!}],
        <%
        }
    }

    %>

    ];
    console.log(lineArr);


    function pathSimplint(){
        var map = new AMap.Map('container', {
            resizeEnable: true,
            zoom:16,
            center:lineArr[0]//默认的地图中心经纬度
        });
        var polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            strokeColor: "#378b87",  //线颜色
            strokeOpacity: 1,     //线透明度
            strokeWeight: 5,      //线宽
            strokeStyle: "solid"  //线样式
        });
        // 添加一些分布不均的点到地图上,地图上添加标记，作为参照
        var markerContent=[];
        lineArr.forEach(function(marker,i) {
            if(i==lineArr.length-1){
                markerContent.push('<div style="width:24px; height: 24px; background: #2E646A; line-height:24px;text-align: center;color: #fff; border-radius: 50%;">终</div>')
            }else{
                markerContent.push('<div style="width:24px; height: 24px; background: #FF9900; line-height:24px;text-align: center;color: #fff; border-radius: 50%;">'+(parseInt(i)+1)+'</div>')
            }
            new AMap.Marker({
                map: map,
                content: markerContent[i],
                position: [marker.lng,marker.lat],
                offset: new AMap.Pixel(-12, -12)
            });
        });
        var model='';
        for(var i=0; i<lineArr.length; i++){
            console.log(lineArr[i])
            model+='<li><span class="sort">'+(i+1)+'</span><span class="text">'+lineArr[i].lng+','+lineArr[i].lat+'</span><span class="delete"></span></li>'
        }
        $(".coord_list").html(model)
    }
    pathSimplint();

</script>

</body>
</html>
